<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单事件</title>
</head>
<body>
<!--onblur	当元素失去焦点时运行脚本。-->
<!--onfocus	当元素获得焦点时运行脚本。-->
<!--onchange	当元素改变时运行脚本。-->
<!--oninput	当元素获得用户输入时运行脚本。-->
<!--oninvalid	当元素无效时运行脚本。-->
<!--onselect	当选取元素时运行脚本。-->
<!--onsubmit	当提交表单时运行脚本。-->
<form id="myForm">
    <label for="text"></label><input type="text" id="text" required>
    <input type="submit" value="submit">
</form>
<script>
    const textInput = document.getElementById("text");
    const myForm = document.getElementById("myForm");

    /* 当文本框获取焦点，文本框背景为红色 */
    textInput.onfocus = function () {
        this.style.background = "red";
    };

    /* 当文本框失去焦点，文本框背景为绿色 */
    textInput.onblur = function () {
        this.style.background = "green";
    };

    /* 当文本框内容改变时，鼠标离开文本框，自动将文本框的内容输出到控制台 */
    textInput.onchange = function () {
        console.log(this.value);
    };

    /* 当文本框内容改变时，立即将改变的内容输出到控制台 */
    textInput.oninput = function () {
        console.log(this.value);
    };

    /* 如果单击“submit”，则不填写文本字段，将发生警报消息 */
    textInput.oninvalid = function () {
        console.log("请您完善表单内容！");
    };

    /* 当选中文本框的内容时，输出“您已经选择了文本框内容！” */
    textInput.onselect = function () {
        console.log("您已经选择了文本框内容！");
    };

    /* 当提交表单的时候，在控制台输出“表单提交” */
    myForm.onsubmit = function () {
        console.log("表单提交");
    };
</script>
</body>
</html>